<script>
import store from "@/store";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
export default {
  name: "index",
  components: {UButton},
  data() {
    return {
      username: "18022222207",
      password: "Admin123@"
    };
  },
  computed: {
    token() {
      return store.state.user.token;
    }
  },
  methods: {
    async login() {
      // 登录
      await store.dispatch("user/login", {
        username: this.username,
        password: this.password,
      });
      uni.navigateTo({
        url: "/pages/index/index"
      });
    },
    toResetPassWord() {
      uni.navigateTo({
        url: "/pages/reset-password/index"
      });
    }
  },
  mounted() {
    // const token = store.getters['user/token'];
    const token = store.state.token;
    console.log(token, 'token');
    if (token) {
      console.log(token,111)
      uni.navigateTo({
        url: "/pages/index/index"
      });
    }
  }
}
</script>

<template>
  <view>
    <!--居中的头像+昵称-->
    <view class="user">
      <view class="avatar">
        <!--<image model="widthfill" src="https://img.yzcdn.cn/vant/cat.jpeg" />-->
      </view>
      <text class="nickname">中瓴星能</text>
    </view>
    <!--用户名+密码输入框-->
    <view class="form">
      <view class="form-item">
        <u--input
            placeholder="请输入账号"
            prefixIcon="account-fill"
            shape="circle"
            v-model="username"
            prefixIconStyle="font-size: 22px;color: #909399"
        ></u--input>
      </view>
      <view class="form-item">
        <u--input
            placeholder="请输入密码"
            shape="circle"
            v-model="password"
            prefixIcon="lock-fill"
            password
            prefixIconStyle="font-size: 22px;color: #909399"
        ></u--input>
      </view>
      <view class="forget">
        <text @click="toResetPassWord">忘记密码</text>
      </view>
      <!--提交按钮-->
      <view class="btn">
        <u-button type="primary" color="#dab386" shape="circle" @click="login">登录</u-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.user{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  .avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .nickname{
    margin-top: 10px;
    font-size: 20px;
  }
}
.form{
    margin-top: 50px;
    width: 80%;
    max-width: 640px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
  .form-item{
    margin-top: 20px;
  }
  .btn{
    margin-top: 30px;
  }
  .forget{
    text-align: right;
    margin-top: 10px;
    font-size: 14px;
    color: #909399;
  }
}
</style>
